<app-header />
<main>
  <ul id="users">
    @for (user of users; track $index) {
      <li>
        <app-user [isSelected]="selectedUserId === user.id" (select)="onUserSelected($event)" [user]="user">
          
        </app-user>
      </li>
    }
    <!-- <li *ngFor="let user of users;">
      <app-user (select)="onUserSelected($event)" [user]="user"></app-user>
    </li> -->
  </ul>
  @if (selectedUser) {
    <app-tasks [name]="selectedUser.name" [userId]="selectedUser.id"></app-tasks>
  }@else {
    <p id="fallback">Select a user to see their tasks</p>
  }

  <!-- <app-tasks *ngIf="selectedUser;else fallback" [name]="selectedUser.name"></app-tasks>
  <ng-template #fallback>
    <p id="fallback">Select a user to see their tasks</p>
  </ng-template> -->
</main>